<template>
  <div class="infoEnter">
    <div style="display:flex;padding:15px 15px 0;">
      <div style="flex-grow:1;padding-top:20px;">
        <p style="font-size:25px;font-weight:800;font-family:PingFang SC, PingFang SC,serif;">
          认证身份快速背调
        </p>
        <p style="color:#696E78;">请您确人是您本人提供并如实填写</p>
      </div>
      <div style="width:100px;">
        <img style="width:100%;" src="https://www.zhichajinkong.com/onlineAuth/assets/info-logo-DTKxsdO9.png">
      </div>
    </div>

    <el-form ref="from" :model="From" :rules="rules" class="register-form">
      <el-form-item prop="name" label="姓名">
        <el-input v-model.trim="From.name" clearable placeholder="为避免后期反复沟通，请按真实情况填写">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>

      <el-form-item prop="idNumber" label="身份证号">
        <el-input
          v-model.trim="From.idNumber" clearable
          placeholder="为避免后期反复沟通，请按真实情况填写">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>

      <el-form-item prop="tel" label="电话">
        <el-input
          v-model.trim="From.tel"
          type="tel" clearable
          placeholder="为避免后期反复沟通，请按真实情况填写">
          <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>
    </el-form>

    <div class="van-row explain">
      <div class="van-col van-col--8">
        <div class="item">
          <img
            src="">
          <span>安全保障</span>
        </div>
        <div class="desc">数据安全有保障</div>
      </div>
      <div class="van-col van-col--8">
        <div class="item">
          <img
            src="">
          <span>使用方便</span></div>
        <div class="desc">轻松认证查背调</div>
      </div>
      <div class="van-col van-col--8">
        <div class="item">
          <img
            src="">
          <span>人工服务</span>
        </div>
        <div class="desc">24小时人工服务</div>
      </div>
    </div>
    <div class="check">
      <input type="checkbox" id="cc" v-model="choose">
      <label for="cc">我确认填写的所有信息真实有效，提交后相关信息将以区块链合同的方式存储，并且知晓电子授权文件与纸质授权文件具有同等法律效益。</label>
    </div>
    <div style="display: flex;justify-content: space-around">
      <el-button style="width: 30vw" @click="$router.back()">上一步</el-button>
      <el-button style="width: 50vw" type="primary" @click="submitForm">
        <div style="display: flex;align-items: center;justify-content: center">
          下一步
          <span style="font-size: 10px">（人脸验证本人）</span>
        </div>
      </el-button>
    </div>
  </div>
</template>

<script>
  import {elecAuth} from "@/api/system/beiDiao"
  import {validateContacts, validateIdNo, validatePhone} from "@/utils/validate"
  import {checkAuth} from "../api/system/beiDiao";
  import {Loading} from "element-ui";
  export default {
    name: "infoEnter",
    data() {
      return {
        From: {
          userId: null,
          name: null,
          idNumber: null,
          tel: null,
          // name: '王江南',
          // idNumber: '510181198908154211',
          // tel: '18190943657'
        },
        choose: false,

        rules: {
          name: [
            {min: 2, max: 20, message: '姓名长度必须介于 2 和 20 之间', trigger: 'blur'},
            {validator: validateContacts, trigger: 'blur'}
          ],
          idNumber: [
            {validator: validateIdNo, trigger: 'blur'}
          ],
          tel: [
            {validator: validatePhone, trigger: 'blur'}
          ],
          code: [{required: true, trigger: "blur", message: "请输入验证码"}]
        }
      };
    },
    created() {
      let query = this.$route.query
      if (query.ui && query.ac) {
        checkAuth(query).then(res => {
          if (res.code != 200) {
            Loading.service({
              text: "授权链接无效",
              spinner: "el-icon-error",
              background: "rgba(0, 0, 0, 0.7)",
            })
          }
        })
      } else {
        Loading.service({
          text: "授权链接异常",
          spinner: "el-icon-error",
          background: "rgba(0, 0, 0, 0.7)",
        })
      }
      this.From.userId = this.$route.query.ui
    },
    methods: {
      submitForm() {
        this.$refs.from.validate(valid => {
          if (valid) {
            this.$modal.loading()
            elecAuth(this.From).then(res => {
              console.log('--res--', res)
              if (res.code == 200) {
                window.open(res.msg, '_self')
              } else {
                this.$modal.msgWarning(res.msg)
              }
            }).catch(() => {
              this.$modal.closeLoading()
            })
          }
        });
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .infoEnter {
    width: 100vw;
    height: 70vh;
    padding: 15px
  }

  .register-form {
    padding: 15px;
    border-radius: 6px;
    background: #ffffff;
    width: 90vw;
    margin: 0 auto;

    .el-input {
      height: 38px;

      input {
        height: 38px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }

  .register-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .register-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .el-register-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .register-code-img {
    height: 38px;
  }


  .explain {
    text-align: center;
    padding: 20px 0px;
  }

  .van-row {
    display: flex;
    flex-wrap: wrap;
  }

  .van-col--8 {
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }

  .explain .item img {
    width: 14px;
    margin-right: 5px;
  }

  .van-col {
    display: block;
    box-sizing: border-box;
    min-height: 1px;
  }

  .explain .item {
    font-size: 14px;
    color: rgb(133, 149, 162);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .explain .desc {
    font-size: 13px;
    color: rgb(133, 149, 162);
    margin-top: 3px;
  }

  .check {
    margin-bottom: 15px;
    color: rgb(131, 142, 151);
    font-size: 13px;
    text-align: justify;
    //text-align-last: justify;
    font-weight: normal;

  }
</style>
